<template>
    <el-container direction="vertical" id="layout-body">
        <loading></loading>
        <back-top></back-top>
        <el-affix v-if="!isEdit" :offset="0">
            <el-header class="menu">
                <default-header></default-header>
            </el-header>
        </el-affix>
        <el-main class="main-body" id="main-body">
            <layout-body></layout-body>
        </el-main>
<!--        <el-footer height="200px" class="menu">
            <default-footer></default-footer>
        </el-footer>-->
    </el-container>
</template>

<script>

import LayoutBody from "@/components/body/LayoutBody";
import DefaultHeader from "@/components/header/DefaultHeader";
//import DefaultFooter from "@/components/footer/DefaultFooter";
import Loading from "@/components/body/Loading";
import BackTop from "@/components/body/BackTop";
import {verifyAccount} from "@/api";

export default {
    name: 'App',
    components: {
        BackTop,
        Loading,
        DefaultHeader,
        LayoutBody,
       // DefaultFooter
    },
    computed: {
        isEdit() {
            return this.$store.state.isEdit
        }
    },
    data() {
        return {}
    },
    methods: {
        /*初始化是要判断账号是否失效*/
        verifyAccount() {
            const that = this;
            verifyAccount()
                .then(res => {
                    //验证成功
                    if (res.code === 200) {
                        that.$store.dispatch("setUser", res.data)
                    } else {
                        that.$store.dispatch("setUser", null)
                        localStorage.removeItem("auth")
                    }
                })
        }
    },
    created() {
        if (localStorage.getItem('store')) {
            this.$store.replaceState(
                Object.assign(
                    {},
                    this.$store.state,
                    JSON.parse(localStorage.getItem('store'))
                )
            )
        }
        window.addEventListener('beforeunload', () => {
            localStorage.setItem('store', JSON.stringify(this.$store.state))
        })
        this.verifyAccount();
        setTimeout(() => {
            window.L2Dwidget.init({
                pluginRootPath: 'static/live2dw/',
                pluginJsPath: 'lib/',
                pluginModelPath: 'live2d-widget-model-hijiki/assets/',
                tagMode: false,
                debug: false,
                model: {jsonPath: '/static/live2dw/live2d-widget-model-hijiki/assets/hijiki.model.json'},
                display: {position: 'right', width: 200, height: 350},
                mobile: {show: true},
                log: false
            })
        }, 1000)
    }
}
</script>

<style>
#layout-body {
    height: 100vh;
    /* header = 80px */
    /*min-height: -moz-calc(100vh - 80px);
    min-height: -webkit-calc(100vh - 80px);
    min-height: calc(100vh - 80px);*/
}

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0;
}

.main-body {
    padding: 0 !important;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .1);
    border-radius: 0;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 10px;
}

/**
 *滚动条的效果
 */
::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    transition: color .2s ease;
    background-image: linear-gradient(aquamarine, #fd7286, lightgreen);
}

.menu {
    width: 100%;
    background-image: linear-gradient(to right, aquamarine, #fd7286, lightgreen);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

body {
    margin: 0;
    padding: 0;
}
</style>
